'use client';

import { useState } from 'react';
import { CareerExperience } from '../career/data';
import { useTheme } from '../context/ThemeContext';

type CareerTimelineProps = {
  experiences: CareerExperience[];
};

export default function CareerTimeline({ experiences }: CareerTimelineProps) {
  const [expandedId, setExpandedId] = useState<number | null>(experiences[0]?.id || null);
  const { themeColor } = useTheme();

  const toggleExpanded = (id: number) => {
    setExpandedId(expandedId === id ? null : id);
  };

  return (
    <div className="relative">
      {/* 垂直线 */}
      <div className="absolute left-4 md:left-1/2 top-0 bottom-0 w-0.5 bg-gray-200 transform -translate-x-1/2 md:translate-x-0"></div>

      {experiences.map((experience, index) => (
        <div
          key={experience.id}
          className={`relative mb-12 group ${
            index % 2 === 0 ? 'md:pr-12 md:text-right md:ml-0 md:mr-auto md:w-1/2' : 'md:pl-12 md:ml-auto md:mr-0 md:w-1/2'
          }`}
        >
          {/* 时间点 */}
          <div className={`absolute left-4 md:left-auto ${index % 2 === 0 ? 'md:right-0' : 'md:left-0'} w-8 h-8 rounded-full bg-white border-4 border-primary-500 z-10 transform -translate-x-1/2 md:translate-x-0 top-0`}></div>
          
          {/* 内容卡片 */}
          <div 
            className={`ml-10 md:ml-0 p-5 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 cursor-pointer ${
              expandedId === experience.id ? 'ring-2 ring-primary-500' : ''
            }`}
            onClick={() => toggleExpanded(experience.id)}
          >
            {/* 时间段 */}
            <div className="text-sm text-primary-600 font-semibold mb-2">{experience.period}</div>
            
            {/* 职位和公司 */}
            <div className="flex justify-between items-start mb-3">
              <div>
                <h3 className="text-lg font-bold text-gray-800">{experience.position}</h3>
                <p className="text-gray-600">{experience.company}</p>
              </div>
              
              {/* 公司Logo，如果有的话 */}
              {experience.logo && (
                <div className="w-12 h-12 rounded-md overflow-hidden bg-gray-100">
                  <img src={experience.logo || '/images/Photo01.jpg'} alt={experience.company} className="w-full h-full object-contain" />
                </div>
              )}
            </div>
            
            {/* 分类标签 */}
            <div className="inline-block px-3 py-1 bg-primary-100 text-primary-800 rounded-full text-xs font-medium mb-3">
              {experience.category}
            </div>
            
            {/* 描述 */}
            <p className="text-gray-700 mb-4">{experience.description}</p>
            
            {/* 展开/收起成就列表 */}
            {expandedId === experience.id && (
              <div className="mt-4 space-y-2">
                <h4 className="font-semibold text-gray-800">主要成就：</h4>
                <ul className="list-disc pl-5 space-y-1 text-gray-700">
                  {experience.achievements.map((achievement, idx) => (
                    <li key={idx} className="text-sm md:text-base">{achievement}</li>
                  ))}
                </ul>
              </div>
            )}
            
            {/* 展开/收起按钮 */}
            <button 
              className="mt-3 text-sm text-primary-600 flex items-center font-medium focus:outline-none"
              onClick={(e) => {
                e.stopPropagation();
                toggleExpanded(experience.id);
              }}
            >
              {expandedId === experience.id ? (
                <>
                  收起详情
                  <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 15l7-7 7 7"></path>
                  </svg>
                </>
              ) : (
                <>
                  查看成就
                  <svg className="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path>
                  </svg>
                </>
              )}
            </button>
          </div>
        </div>
      ))}
    </div>
  );
} 